<template>
  <div class="comment">
    <div class="question-answer">
      <!-- 提问模块 -->
      <div class="qa-search-container">
        <div class="search-box">
          <input v-model="content" type="text" class="search-input" placeholder="学习了本课程有什么心得呢？">
        </div>
        <div class="search-btn" @click="addComment">
          我要留言
        </div>
      </div>
    </div>
    <!-- 评价列表 -->
    <ul class="comment-list">
      <li v-for="(comment,index) in list" :key="index" class="comment-item">
        <div class="img-box">
          <img :src="comment.avatar" alt="">
        </div>
        <div class="comment-content-wrapper">
          <p>
            <span class="name">{{ comment.author }}</span>
          </p>
          <p class="content">
            {{ comment.content }}
          </p>
          <p>
            <span class="like">
              <i class="iconfont">&#xe60c;</i>
              {{ comment.like }}
            </span>
            <span class="time">时间：{{ comment.createTime }}</span>
          </p>
        </div>
      </li>
    </ul>

  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { ERR_OK } from 'api/config.js'
  import { getCommentByType, addComment } from 'api/course.js'
export default {
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      list: [],
      content: ''
    }
  },
  computed: {
    // vuex
    ...mapGetters(['userInfo'])
  },
  created() {
    this.content = ''
    this.fetchData()
  },
  methods: {
    fetchData() {
      if (this.data.videoUrl != undefined) {
        getCommentByType('course', this.data.id).then(res => {
          let { code, data } = res
          if (code === ERR_OK) {
            this.list = data
          }
        })
      } else {
        getCommentByType('article', this.data.id).then(res => {
          let { code, data } = res
          if (code === ERR_OK) {
            this.list = data
          }
        })
      }
    },
    addComment() {
      let data = {
        uid: this.userInfo.id,
        author: this.userInfo.username,
        avatar: this.userInfo.avatar,
        content: this.content,
        type: this.data.videoUrl != undefined ? 'course' : 'article',
        tid: this.$route.params.id
      }
      addComment(data).then(res => {
        let { code, data } = res
        if (code === ERR_OK) {
          this.$message.success('留言成功')
          this.content = ''
          this.fetchData()
        }
      })
    }
  },
}
</script>
<style lang="stylus" scoped>
  .question-answer
    .qa-search-container
      display: flex;
      align-items: center;
      height: 50px;
      .search-box
        flex: 1;
        position: relative;
        margin-right: 20px;
        padding: 0 60px 0 16px;
        overflow: hidden;
        border: 1px solid #b2b8bd;
        border-radius: 8px;
        box-sizing: border-box;
        background: #fff;
        .iconfont
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 30px;
          color: #9199a1;
        .search-input
          width: 100%;
          height: 48px;
          background-color: transparent;
          font-size: 16px;
          line-height: 24px;
          outline: none;
      .search-btn
        flex: 0 0 138px;
        width: 138px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        background-color: #f20d0d;
        border-radius: 24px;
        color: #fff;
        cursor: pointer;
  .comment
    .score-overview
      padding: 24px 32px;
      display: flex;
      align-items: center;
      background-color: #fff;
      box-shadow: 0 0 8px 4px rgba(7,17,27,0.1);
      border-radius: 12px;
      .star-box
        flex: 1;
        & > span
          display: inline-block;
          vertical-align:  middle;
          line-height: 24px;
          &.title
            width: 40px;
            text-align: center;
            color: #1c1f21;
            font-size: 14px;
            line-height: 16px;
            font-weight: 700;
          &.score
            padding-left: 5px;
            font-size: 32px;
            color: #4d555d;
            font-weight: 700;
        >>> .star
          margin-left: 10px;
          vertical-align: middle;
          .star-item
            margin-right: 3px;
      .score-box
        margin-left: 50px;
        & > span
          display: inline-block;
          vertical-align:  middle;
          line-height: 24px;
          font-size: 14px;
          &.score
            padding-left: 12px;
            font-size: 26px;
            color: #f90;
            font-weight: 700;
    .comment-list
      margin-top: 24px;
      .comment-item
        margin-bottom: 8px;
        padding: 24px; 36px;
        display: flex;
        align-items: flex-start;
        background-color: #fff;
        box-shadow: 0 0 8px 4px rgba(7,17,27,.1);
        border-radius: 12px;
        .img-box
          margin-right: 20px;
          flex: 0 0 48px;
          width: 48px;
          height: 48px;
          & > img
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        .comment-content-wrapper
          flex: 1;
          & > p
            font-size: 14px;
            color: #14191e;
            line-height: 24px;
            &.content
              margin-top: 4px;
              margin-bottom: 8px;
              line-height: 28px;
            .name
              color: #787d82;
              font-weight: 700;
            .score, .time
              float: right;
            .time
              color: #b5b9bc;
              font-size: 12px;
            .like
              padding: 7px 15px;
              border-radius: 18px;
              background-color: rgba(84,92,99,0.1);
              color: #545c63;
              cursor: pointer;
</style>
